<template>
  <div>
    <el-form  label-width="68px">
      <span><font color="black">策略选股结果：</font></span>
    </el-form>
    <div style="height: 30px"></div>
    <el-table style="width: 100%" height="450"  :data="strategyList" :header-cell-style="getRowClass"
              :cell-style="getrowStle" >
      <!--<el-table-column  fixed label="编号"  align="center" :prop="index" />-->
      <el-table-column label="序号" width="70px" fixed align="center">
        <template slot-scope="scope">
          {{scope.$index+1}}
        </template>
      </el-table-column>
      <div v-for="(item,index) in btlist">
        <!--<div v-if="item!='strategy_cd' && item!='sec_cd'">-->
          <!---->
        <!--</div>-->
        <el-table-column v-if="item=='strategy_nm'" fixed label="策略名称" width="200" align="center" :prop="item" />
        <el-table-column v-else-if="item=='strategy_cd'"  label="策略编号" align="center" :prop="item" />
        <el-table-column v-else-if="item=='trans_dt'" fixed  label="交易日期"  width="120" align="center" :prop="item" />
        <el-table-column v-else-if="item=='sec_cd'"  fixed label="股票代码" align="center" :prop="item" />
        <el-table-column v-else-if="item=='sec_nm'" fixed  label="股票名称" align="center" :prop="item" />
        <el-table-column v-else  :label="item" align="center" :prop="item" />

      </div>
    </el-table>
    <div style="height: 30px"></div>
    <div  class="count-chart-wrapper">

      <div class="count-chart" ref="chart"></div><!--必须设置宽高-->
    </div>
    <div style="height: 30px"></div>
    <el-form  label-width="68px" >
      <span><font color="black">投资评价：</font></span>
    </el-form>
    <div style="height: 30px"></div>
    <el-table style="width: 100%" height="450"  :data="userStockdataList"  :header-cell-style="getRowClass"
              :cell-style="getrowStle" >
      <el-table-column label="序号" width="70px" align="center" fixed >
        <template slot-scope="scope">
          {{scope.$index+1}}
        </template>
      </el-table-column>
      <div v-for="(item,index) in userStockheadtitle">
        <div v-if="item!='strategy_cd' && item!='sec_cd'">
          <el-table-column v-if="item=='strategy_nm'" fixed label="策略名称" width="120" align="center" :prop="item" />
          <!--<el-table-column v-else-if="item=='strategy_cd'"  label="策略编号" align="center" :prop="item" />-->
          <el-table-column v-else-if="item=='trans_dt'" fixed  label="交易日期"  width="120" align="center" :prop="item" />
          <!--<el-table-column v-else-if="item=='sec_cd'" fixed  label="股票代码" align="center" :prop="item" />-->
          <el-table-column v-else-if="item=='sec_nm'" fixed  label="股票名称" align="center" :prop="item" />
          <el-table-column v-else  :label="item" align="center" :prop="item" />
        </div>

      </div>
    </el-table>

  </div>
</template>

<script>
  import { importOne } from "@/api/system/strategy";
  import { Message,Loading } from 'element-ui'
  import echarts from "echarts";
  export default {
    name: "lamlog",
    show:false,
    props: {
      query: {
        type: Object,
        default: function () {
          let obj = {
            strategyCd:''
          };
          return obj;
        },
        required: false
      }
    },


      data() {
        return {
          show:false,
          btlist:[],
          strategyList:[],
          userStockheadtitle:[],
          userStockdataList:[],
          trans_dt:[],
          STY_index:[],
          HS300_index:[]





        }},
    activated () {
      this.importOne();

    },
    created() {
      this.importOne();

    },
    mounted() {
      // this.initChart();
    },
      methods: {
        getRowClass ({ rowIndex }) {
          if (rowIndex==0) {
            return 'background:RGB(238,239,246)'
          } else {
            return ''
          }

          },
        getrowStle ({ rowIndex }) {
          if (rowIndex%2==0) {
            return 'background-color: #f0f9eb'
          } else {
            return ''
          }

        },
        //设置指定行、列、具体单元格颜色
        // cellStyle({row, column, rowIndex, columnIndex}) {
        //   // alert(1111);
        //   if (columnIndex === 1 && columnIndex === 0) { //指定坐标rowIndex ：行，columnIndex ：列
        //     return 'background:#E1F5A9' //rgb(105,0,7)
        //   } else {
        //     return ''
        //   }
        // },

          importOne() {
          let strategyCd=this.query.strategyCd;
          const url = '/system/strategy/importData/' + strategyCd;
          let downloadLoadingInstance1 = Loading.service({ text: "正在分析数据，请稍候", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", })
          importOne(url).then(response => {
            if(response.code==200){
              this.btlist = response.data.datas.headtitle;
              // alert(this.btlist);
              this.strategyList = response.data.datas.dataList;
              this.userStockheadtitle = response.data.tbDiyStrategyPros.headtitle;
              // alert(this.btlist);
              this.userStockdataList = response.data.tbDiyStrategyPros.dataList;
              this.trans_dt = response.data.trans_dt;
              this.STY_index = response.data.STY_index;
              this.HS300_index = response.data.HS300_index;
              this.initChart();
              downloadLoadingInstance1.close()

            }else {
              this.$modal.msgError("系统出错,请联系管理员！");
            }
          });
        },

        // 初始化图表样式
        initChart() {
          this.chart = echarts.init(this.$refs.chart);
          let _this = this;
          this.chart.setOption({
            title: {
              text: '累计收益率'
            },
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              data: ['累计收益率','沪深300区间涨幅']
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            toolbox: {
              feature: {
                // saveAsImage: {}
              }
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data:this.trans_dt
            },
            yAxis: [
              {
                type: 'value'
                // ,name:"累计收益率"
              }
              // ,
              // {
              //   type: 'value',
              //   name:"沪深300区间涨幅"
              // },
            ],

            series: [
              {
                name: '累计收益率',
                type: 'line',
                // stack: 'Total',
                // yAxisIndex:0,
                data: this.STY_index
              }
              ,
              {
                name: '沪深300区间涨幅',
                type: 'line',
                // stack: 'Total',
                // yAxisIndex:1,
                data:this.HS300_index
              }
            ]
            });
        }


      }
    }


</script>

<style scoped>
  .count-chart-wrapper {
    width: 100%;
    margin: 0 auto;
    background-color: antiquewhite;
  }
  .count-chart {
    position: relative;
    margin: 0 auto;
    width: 80%;
    height: 600px;
  }
  .el-table .warning-row {
    background: oldlace;
  }

</style>
